<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MinnanoNihongo Grammar</title>
<!-- jQuery Mobile references -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/localstorage.js"></script>
<script type="text/javascript" src="js/lesson.js"></script>
<script type="text/javascript" src="js/grammar-list.js"></script>

<script type="text/javascript">
	//xu ly lesson list in panel
	$(document).ready(function() {
		var getLesson = false;
		$("#menu-lesson").click(function() {
			if (getLesson == false) {
				connectDBLesson();
				getLesson = true;
			}
		});
	});
</script>


<style>
#wrap {
	text-align: center
}

#wrap span {
	width: 680px;
	display: inline-block;
	text-align: left;
	text-indent: 50px;
	font-family: "Times New Roman", Times, serif;
	font-style: normal;
	font-size: 14px;
	font-weight: normal;
}

#wrap span {
	display: inline;
}

#wrap>span {
	display: inline-block;
}
</style>
</head>

<body onload="connectDB();">

	<div data-role="page" class="jqm-demos" id="panel-fixed-page1"
		data-title="Panel fixed positioning" data-url="panel-fixed-page1">

		<!-- Start header -->
		<div data-role="header" data-position="fixed" data-theme="b">
			<a id="menu-lesson" href="#nav-panel" data-icon="bars"
				data-iconpos="notext"> Menu </a> 
				<div data-role="controlgroup" data-type="horizontal"
                                class="ui-mini ui-btn-right" data-inline="true">
                                
                                <a href="search.html" id="btnSearch" data-iconpos="notext" data-direction="reverse"
                                        data-ajax="false" class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-notext">Search</a>
                                        
                                <a href="favourite.html?action=grammar" data-ajax="false" data-direction="reverse"
                                        class="ui-btn ui-btn-inline ui-icon-heart ui-btn-icon-notext">Favourite List</a>

                                <a href="index.html" id="btnHome" data-iconpos="notext" data-direction="reverse"
                                        data-ajax="false"
                                        class="ui-btn ui-btn-inline ui-icon-home ui-btn-icon-notext">Home</a>
             </div>
			<h1 id="lesson-name" style="float: left; margin-left: 50px;"></h1>
		</div>
		<!-- /header -->

		<!-- Start main content -->
		<div role="main" class="ui-content jqm-content jqm-fullwidth">
			<div id="content">
				<ol data-role="listview" id="grammar-list" class="split-list">
				</ol>
			</div>
		</div>
		<!-- /content -->

		<!-- Start footer -->
		<div data-role="footer" data-position="fixed"></div>
		<!-- /footer -->


		<!-- Start panel -->
		<div data-role="panel" data-position-fixed="true" data-display="push"
			data-theme="b" id="nav-panel">
			<div data-role="header" data-position-fixed="true" data-theme="b">
				<h5>目次</h5>
			</div>
			<ul data-role="listview" data-inset="true" data-divider-theme="a"
				id="lesson-list">
			</ul>
		</div>
		<!-- /panel -->
	</div>
</body>
</html>
